<template>
  <div class="custom-vedio">
    <video ref="exampleVideo" muted width="240" height="180" class="video-js vjs-default-skin matrix_video" controls>
      <source :src="videoUrl" type="application/x-mpegURL" />
    </video>
  </div>
</template>
<script>
import 'video.js/dist/video-js.css'
import Videojs from 'video.js'
export default {
  data() {
    return {
      videoUrl:''
    }
  },
  props: {
    url: {
      type: String,
    },
  },
  watch:{
    // url:{
    //   immediate:true,
    //   deep:true,
    //   handler(val){
    //   }
    // }
  },
  mounted() {
    this.initVideo()
  },
  methods: {
    initVideo() {
       this.videoUrl = this.url
      if (this.videoUrl == '') return this.$message.warning('暂无视频')
      this.visible = true
      this.$nextTick(() => {
        this.player = Videojs(this.$refs.exampleVideo)
        this.player.src({
          src:this.url,
          type:"application/x-mpegURL"
        })
        this.player.play()
        // setTimeout(() => {
        //   this.player.pause()
        //   this.player.load()
        // }, 1000)
      })
    },
    cancelVideo() {
      this.player.dispose()
    },
  },
  destroyed() {
    this.player.dispose()
  },
}
</script>
<style lang="less" scoped>
.custom-vedio {
  // width: 100%;
  // height: 100%;
  .matrix_video,
  video {
  object-fit: fill
  }
}
</style>